<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="200" height="200" style="border: 1px solid red;"></canvas>
</body>
<script>

    //     ctx.beginPath() //------------------------------------------ 一个路径的开始
    //   ctx.moveTo(90, 100) // ----- 起始点
    //   ctx.lineTo(80, 120) // ------ 直线的第二个点
    //   ctx.lineTo(120, 120) // ----- 直线的第三个点
    //   ctx.closePath() // ----------------------------------------- 一个路径的结束
    //   ctx.lineWidth = 4 // -------- 直线的宽度
    //   ctx.strokeStyle = 'red' // ------ 直线的颜色，需要在绘画前设置
    //   ctx.stroke() // --------------------------------------------- 描边 (绘制)
    //   ctx.fillStyle= 'yellow' // ------ 填充的颜色，需要在绘画前设置
    //   ctx.fill() // ----------------------------------------------- 填充 (绘制)
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var  ctx=canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 800;
        if(ctx.ellipse){
             ctx.ellipse(400,400,300,250,0,0,Math.PI*2); 
             ctx.moveTo(300, 300);
             ctx.ellipse(300,300,200,150,0,0,Math.PI*2); 
             
            //  ctx.fillStyle="#058";
            ctx.strokeStyle="#000";
            // ctx.fill();
            ctx.stroke();
        }else{
            alert("no ellipse!");
        } 
     }

     



</script>

</html>